Dioxus Router 多 Layout 布局踩坑：`#[route("/")]` 的通配行为与根布局分发方案

关键问题出在 #[route("/")] 上。Dioxus Router 在处理根路径路由时，/ 会匹配所有 URL 路径，而不仅仅是精确的 /。这意味着：

• 访问 / → 匹配 Home ✅
• 访问 /admin → 同时匹配 Home（因为 / 通配）和 AdminDashboard（精确匹配）❌

当路由同时匹配时，Router 会渲染两条路径的 Layout 链：

1. Home 分支：FrontendShell → Outlet（尝试在中间列渲染子路由）
2. AdminDashboard 分支：AdminShell → Outlet（渲染后台内容）

结果就是 AdminShell 被渲染进 FrontendShell 的 Outlet 位置，形成了"前台套后台"的结构。

5.4 为什么小屏下"正常"？

因为 FrontendShell 使用了 Bootstrap 的响应式类：

<div class="d-none d-lg-block col-lg-3"><!-- 左栏 --></div>
<div class="col-12 col-lg-6"><!-- 中间内容 --></div>
<div class="d-none d-lg-block col-lg-3"><!-- 右栏 --></div>

• 屏幕 < 992px 时，左右两栏 d-none 隐藏，中间栏 col-12 占满宽度 → 看起来像两栏（后台 sidebar + 内容）
• 屏幕 ≥ 992px 时，左右两栏 d-lg-block 显示，变成三栏 → 问题暴露

这恰恰是"小屏下正常、大屏三栏"的根源——不是 CSS 响应式，而是 Bootstrap 栅格恰好在小屏下隐藏了左右两栏。

6. 解决方案：单根布局分发

6.1 思路

不再在 enum 层面使用多个 #[layout()]，而是使用一个统一的根布局 AppShell 包裹所有路由，在运行时判断当前路由是前台还是后台，然后渲染对应的 Shell。

#[derive(Routable, Clone, PartialEq)]
pub enum Route {
    #[layout(AppShell)]    // ← 唯一的 Layout
    #[route("/")]
    Home,
    #[route("/login")]
    Login,
    ...
    #[route("/admin")]
    AdminDashboard,
    ...
}

6.2 AppShell 的实现

#[component]
pub fn AppShell() -> Element {
    let route = use_route::<Route>();
    let is_admin = matches!(
        &route,
        Route::AdminDashboard
            | Route::AdminArticles
            | Route::AdminComments
            | Route::AdminUsers
            | Route::AdminSettings
    );

    if is_admin {
        rsx! { AdminShell { Outlet::<Route> {} } }
    } else {
        rsx! { FrontendShell { Outlet::<Route> {} } }
    }
}

关键点：AdminShell 和 FrontendShell 不再自己包含 Outlet::<Route> {}，而是接收 children: Element。由 AppShell 将 Outlet::<Route> {} 作为 children 传入。

6.3 子 Shell 的适配

AdminShell（admin_layout.rs）：

#[component]
pub fn AdminShell(children: Element) -> Element {
    // ... sidebar + topbar ...
    rsx! {
        div { class: "flex h-screen bg-slate-50",
            aside { class: "w-56 ...", /* 侧边栏 */ }
            div { class: "flex flex-col flex-1 ...",
                // 顶栏
                div { class: "..." /* 顶栏 */ }
                // 内容区 — 使用 children 替代 Outlet
                div { class: "flex-1 overflow-y-auto p-6",
                    {children}
                }
            }
        }
    }
}

FrontendShell（route.rs）：

#[component]
pub fn FrontendShell(children: Element) -> Element {
    rsx! {
        div { class: "d-flex flex-column min-vh-100", ...,
            Header {}
            main { ... {children} ... }
            Footer {}
        }
    }
}

6.4 渲染路径对比

修复前：

Router
├── #[layout(FrontendShell)]   ← 匹配 /admin（因为 / 是通配）
│   └── Outlet → ???           ← 没有匹配的子路由
├── #[layout(AdminShell)]      ← 也匹配 /admin
│   └── Outlet → AdminDashboard

修复后：

Router
└── #[layout(AppShell)]        ← 唯一 Layout，匹配所有路由
    └── AppShell 判断路由类型
        ├── 后台 → AdminShell { Outlet → AdminDashboard }
        └── 前台 → FrontendShell { Outlet → Home / Login / ... }

7. 验证

| 页面 | 布局 | 结构 | |------|------|------| | /admin | 纯两栏 | flex h-screen bg-slate-50 | | /admin/settings | 两栏 + 右侧内容 | 同上 | | / | 三栏 | d-flex flex-column min-vh-100 + Header + Footer | | /login | 居中 | Header + 居中表单（无侧栏） | | /blog | 三栏 | 正常三栏布局 |

所有页面均达到预期，且后台布局在所有屏幕宽度下始终为两栏，不再依赖任何响应式断点。

8. 经验总结

1. #[route("/")] 不是精确匹配——它在 Dioxus Router 中具有通配行为，会匹配所有 URL。这是一个容易忽略的语义细节。

2. 多 #[layout()] 的幻觉——虽然 Routable 派生宏允许在 enum 中多次使用 #[layout()]，但结合根路径路由时会触发"双 Layout 同时渲染"的 bug。更可靠的方案是一个根 Layout + 运行时分发。

3. 调试技巧——使用 Playwright/浏览器控制台检查 DOM 树和 CSS 类名，比肉眼观察页面外观更可靠。本例中如果只看"小屏正常、大屏三栏"的现象，很容易误判为 CSS 响应式问题。

4. Bootstrap + Tailwind 混用需谨慎——Bootstrap 的响应式栅格可能在你不注意时"掩盖"真正的渲染问题。

9. 参考资料

• Dioxus 0.7 Router 文档
• Dioxus Routable derive 宏源码